import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd-mobile'
import css from './info.module.scss'
import { formatNumber } from '@/utils'
export default class TagInfo extends PureComponent {
    static propTypes = {        
        name: PropTypes.string,
        pic: PropTypes.string,
        follow: PropTypes.number,
        videos: PropTypes.number,
        focused: PropTypes.bool
    }

    static defaultProps = {
        follow: 0,
        videos: 0,
        focused: false
    }

    render() {
        const { pic, name, follow, videos, focused } = this.props
        return (
            <div className={css['wrap']}>
                <div className={css['cover']}>
                    { pic && <img className={css['cover-img']} src={pic} alt="图片" />}
                </div>
                <div className={css['info']}>
                    <div className="name">{name}</div>
                    <div>{formatNumber(follow)}关注</div>
                    <div>{videos}个相关视频</div>
                </div>
                <Button type={focused ? "ghost" : "primary"} className={css["follow"]} disabled={focused} size="small">关注</Button>
            </div>
        )
    }
}
